<template>
  <div class="language-switcher">
    <a-dropdown :trigger="['click']" placement="bottomRight">
      <a-button type="text" class="language-btn">
        <GlobalOutlined />
        <span class="language-text">{{ currentLanguageText }}</span>
        <DownOutlined />
      </a-button>
      
      <template #overlay>
        <a-menu @click="handleLanguageChange">
          <a-menu-item key="zh-CN">
            <span class="flag">🇨🇳</span>
            <span>中文</span>
          </a-menu-item>
          <a-menu-item key="en-US">
            <span class="flag">🇺🇸</span>
            <span>English</span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { GlobalOutlined, DownOutlined } from '@ant-design/icons-vue'

const { locale } = useI18n()

// 当前语言显示文本
const currentLanguageText = computed(() => {
  return locale.value === 'zh-CN' ? '中文' : 'English'
})

// 切换语言
const handleLanguageChange = ({ key }) => {
  locale.value = key
  localStorage.setItem('locale', key)
  
  // 更新页面标题
  const currentRoute = window.location.pathname
  const titleMap = {
    '/': locale.value === 'zh-CN' ? '首页 - Web商城' : 'Home - Web Mall',
    '/products': locale.value === 'zh-CN' ? '商品列表 - Web商城' : 'Products - Web Mall',
    '/cart': locale.value === 'zh-CN' ? '购物车 - Web商城' : 'Cart - Web Mall',
    '/profile': locale.value === 'zh-CN' ? '个人中心 - Web商城' : 'Profile - Web Mall',
    '/login': locale.value === 'zh-CN' ? '登录 - Web商城' : 'Login - Web Mall',
    '/register': locale.value === 'zh-CN' ? '注册 - Web商城' : 'Register - Web Mall',
    '/favorites': locale.value === 'zh-CN' ? '我的收藏 - Web商城' : 'My Favorites - Web Mall',
    '/orders': locale.value === 'zh-CN' ? '我的订单 - Web商城' : 'My Orders - Web Mall'
  }
  
  if (titleMap[currentRoute]) {
    document.title = titleMap[currentRoute]
  }
}
</script>

<style scoped>
.language-switcher {
  display: inline-block;
}

.language-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.language-btn:hover {
  color: #1890ff;
  background-color: #f0f0f0;
}

.language-text {
  font-size: 14px;
  margin: 0 4px;
}

.flag {
  margin-right: 8px;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .language-text {
    display: none;
  }
  
  .language-btn {
    padding: 4px;
  }
}
</style> 